<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好运网</title>
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>

<body>
<div th:include="header::header"></div>
<div class="container">
 <div class="find_pwd_box">
 	<div class="find_pwd_step">
 		<div class="find_pwd_line">
 			<div class="on">
 				<span>1</span>
 				<p>填写验证码</p>
 			</div>
 			<div>
 				<span>2</span>
 				<p>修改密码</p>
 			</div>
 			<div>
 				<span>3</span>
 				<p>完成</p>
 			</div>
 		</div>
 	</div>
 	<div class="find_pwd_step_one">
 		<form  id="iphone_form" method="post">
 		<div class="find_pwd_iphone">
 			<div class="from_Centered">
 				<div class="setting_pwd_box_row" style="margin-top:10px;">
 					<span style="margin-right:64px;">&nbsp;</span>
 					账户名：
					<input type="text" style="width:200px" name="userName" class="r_inptut inputwd300" />
 				</div>
 				<div class="setting_pwd_box_row">
 					<span style="margin-right:50px;">&nbsp;</span>
 					真实姓名：
					<input type="text" style="width:200px" name="realName" class="r_inptut inputwd300" />
 				</div>
 			</div>
 			<h3>
 				<i></i>
 				手机找回密码
 			</h3>
 			
 			<div class="from_Centered">
 				<div class="setting_pwd_box_row">
 					手机号码：
					<input type="text" name="phoneNumber" class="r_inptut inputwd300" />
 				</div>
 				<div class="setting_pwd_box_row">
 					&nbsp;&nbsp;&nbsp;&nbsp;验证码：
 					<input type="text" name="verifyCode" class="r_inptut inputwd300" style="width:177px;vertical-align: middle;" />
 					<span class="setting_phone_tip">
 						<div id="iphoneCode" style="cursor:pointer;">获取验证码</div>
 					</span>
 				</div>
 				<div class="setting_pwd_box_row" style="margin-top:15px;">
 					<button class="as_but inputwd300" id="iphoneNextStepButton" type="button">下一步</button>
 				</div>
 			</div>

 			</form>
 		</div>
 		<div class="find_pwd_email">
 			<form action="" id="email_form" method="post">
 			<div class="find_pwd_email">
 				<div class="from_Centered">
 				<div class="setting_pwd_box_row" style="margin-top:10px;">
 					<span style="margin-right:64px;">&nbsp;</span>
 					账户名：
					<input type="text" style="width:200px" name="userName" class="r_inptut inputwd300" />
 				</div>
 				<div class="setting_pwd_box_row">
 					<span style="margin-right:50px;">&nbsp;</span>
 					真实姓名：
					<input type="text" style="width:200px" name="realName" class="r_inptut inputwd300" />
 				</div>
 			</div>
 			<h3>
 				<i></i>
 				邮箱找回密码
 			</h3>
 			
 			<div class="from_Centered">
 				<div class="setting_pwd_box_row">
 					邮箱账号：
					<input type="email" name="email" class="r_inptut inputwd300" />
 				</div>
 				<div class="setting_pwd_box_row">
 					&nbsp;&nbsp;&nbsp;&nbsp;验证码：
 					<input name="verifyCode" type="text" class="r_inptut inputwd300" style="width:177px;vertical-align: middle;" />
 					<span class="setting_phone_tip">
 						<div style="cursor:pointer;">获取验证码</div>
 					</span>
 				</div>
 				<div class="setting_pwd_box_row" style="margin-top:15px;">
 					<button class="as_but inputwd300" id="emailNextStepButton"  type="button">下一步</button>
 				</div>
 			</div>
 			</form>
 		</div>
 	</div>
 </div>
</div>
</div>
<div th:include="footer::copy"></div>
<div th:include="right::right"></div>
<!-- 弹窗 end-->
</body>
</html>
<script>

	$("#iphoneNextStepButton").click(function () {
	    var iphone_form = $("#iphone_form");
        var userName = iphone_form.find("input[name='userName']").val();
        var realName = iphone_form.find("input[name='realName']").val();
        var phoneNumber = iphone_form.find("input[name='phoneNumber']").val();
        var verifyCode = iphone_form.find("input[name='verifyCode']").val();
        if(userName.length ==0){
            alertWorning("用户名不能为空!");
            return;
		}
        if(realName.length ==0){
            alertWorning("真实姓名不能为空!");
            return;
        }

        if(userName.length ==0){
            alertWorning("手机号码不能为空!");
            return;
        }
        if(userName.length ==0){
            alertWorning("验证码不能为空!");
            return;
        }

    });




    var countDownNumber = 60;
    var initTimer;
    
    $("#iphoneCode").click(function () {
        initTimer= setInterval(function(){
            countdown();
        },100);

    })

    function countdown() {
        if(countDownNumber>1){
            $("#iphoneCode").text(--countDownNumber);
            $("#iphoneCode").attr('disabled', true);
        }else{
            window.clearInterval(initTimer);
            countDownNumber = 60;
            $("#iphoneCode").text("获取验证码");
            $("#iphoneCode").attr('disabled', false);
        }
    }

    $("#emailNextStepButton").click(function () {
        var iphone_form = $("#email_form");
        var userName = iphone_form.find("input[name='userName']").val();
        var realName = iphone_form.find("input[name='realName']").val();
        var phoneNumber = iphone_form.find("input[name='phoneNumber']").val();
        var verifyCode = iphone_form.find("input[name='verifyCode']").val();
        if(userName.length ==0){
            alertWorning("用户名不能为空!");
            return;
        }
        if(realName.length ==0){
            alertWorning("真实姓名不能为空!");
            return;
        }

        if(userName.length ==0){
            alertWorning("手机号码不能为空!");
            return;
        }
        if(userName.length ==0){
            alertWorning("验证码不能为空!");
            return;
        }
    });

</script>
